<template>
  <div class="mod-config questions-box">
    <div class="questions-left">
      <paper-cate
        ref="paperCate"
        :setCurrent="setCurrent"
        :current="current"
        :url="{
                                cateType: 2,
                                update:'/exam-admin/ques/cate/update',
                                save:'/exam-admin/ques/cate/save',
                                delete:'/exam-admin/ques/cate/delete',
                                tree:'/exam-admin/ques/cate/tree'
                                }"
      />
    </div>
    <div class="questions-right" ref="fixedMain">
      <el-form
        :inline="true"
        :model="dataForm"
        @keyup.enter.native="getDataList(1)"
        ref="fixedForm"
      >
        <el-form-item>
          <el-input v-model="dataForm.key" placeholder="题干" clearable @clear="getDataList(1)" />
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="dataForm.quesLevel"
            filterable
            placeholder="请选择"
            clearable
            @clear="getDataList(1)"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList(1)">查询</el-button>
          <el-button
            v-if="isAuth('questions:quesjudgeqst:save')"
            type="primary"
            @click="addOrUpdateHandle()"
          >新增</el-button>
          <el-button
            v-if="isAuth('questions:quesjudgeqst:save')"
            type="primary"
            @click="batchImportHandlea()"
          >批量导入</el-button>
          <el-button type="primary" @click="duplicatechecking('/exam-admin/ques/judge/checking')">查重</el-button>
          <el-button
            v-if="isAuth('questions:quesjudgeqst:delete')"
            type="danger"
            @click="deleteHandle()"
            :disabled="dataListSelections.length <= 0"
          >批量删除</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        @selection-change="selectionChangeHandle"
        width="100%"
        :height="fixedTableHeight"
        style="width: 100%;"
      >
        <el-table-column
          fixed="left"
          type="selection"
          header-align="center"
          align="center"
          width="50"
        />
        <el-table-column type="index" header-align="center" align="center" label="序号" width="50" />
        <el-table-column prop="cateName" header-align="center" align="center" label="试题分类" />
        <el-table-column prop="info" header-align="center" align="center" width="340" label="题干内容">
          <template slot-scope="scope">
            <span v-html="decode(scope.row.info)" />
          </template>
        </el-table-column>
        <el-table-column prop="answ" header-align="center" align="center" label="答案">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.answ === 'A'" type="success">对</el-tag>
            <el-tag v-else type="warning">错</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="analysis" header-align="center" align="center" label="答案解析" />
        <el-table-column
          prop="level"
          header-align="center"
          align="center"
          label="试题难度"
          :formatter="formatterLevel"
        />
        <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
            <el-button type="text" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="fixedPag"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      />
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList" />
      <batch-import
        v-if="batchImportVisible"
        ref="batchImport"
        @uploadFile="uploadFile"
        url="/exam-admin/ques/import/judge"
      />
      <check-table v-if="CheckVisible" ref="checkTable" :getDataList="getDataList" />
    </div>
  </div>
</template>

<script>
import AddOrUpdate from './quesjudgeqst-add-or-update'
import BatchImport from './batchimport'
import CheckTable from '../exam/checkTable'
import paperCate from './../../../views/modules/paper/papercate'
import { decodeSrc } from '@/utils/htmlUtils'

export default {
  data() {
    return {
      fixedTableHeight: 0,
      dialogFormVisible: false,
      current: {},
      CheckVisible: false,
      dataForm: {
        key: '',
        quesCateId: ''
      },
      options: [
        {
          value: '0',
          label: '简单'
        },
        {
          value: '1',
          label: '正常'
        },
        {
          value: '2',
          label: '困难'
        }
      ],
      dataList: [],
      quesType: 3,
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      loading: false,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      batchImportVisible: false
    }
  },
  components: {
    CheckTable,
    AddOrUpdate,
    BatchImport,
    paperCate
  },
  mounted() {
    this.$refs.paperCate.init()
    this.getDataList()
    this.$nextTick(_ => {
      this.examResize()
      window.addEventListener('resize', () => this.examResize())
    })
  },
  methods: {
    examResize() {
      if (this.$refs.fixedMain) {
        this.fixedTableHeight =
          this.$refs.fixedMain.clientHeight -
          this.$refs.fixedForm.$el.offsetHeight -
          this.$refs.fixedPag.$el.offsetHeight -
          15
      }
    },
    decode(val) {
      return decodeSrc(val)
    },
    setCurrent(data) {
      this.current = data
      this.dataForm.quesCateId = data.id
      this.getDataList(1)
    },
    // 获取数据列表
    getDataList(page) {
      if (page) this.pageIndex = page
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/exam-admin/ques/judge/list'),
        method: 'post',
        data: {
          page: this.pageIndex,
          limit: this.pageSize,
          keyword: this.dataForm.key,
          quesLevel: this.dataForm.quesLevel,
          quesCateId: this.dataForm.quesCateId
        }
      }).then(data => {
        if (data && data.code === 200) {
          this.dataList = data.data.list
          this.totalPage = data.data.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
        this.dataListLoading = false
      })
    },
    duplicatechecking(url) {
      this.CheckVisible = true
      this.$nextTick(() => {
        this.$refs.checkTable.init(url, 1, this.quesType)
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val
      this.getDataList()
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val
    },
    // 新增 / 修改
    addOrUpdateHandle(id) {
      this.addOrUpdateVisible = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(id)
      })
    },
    // 删除
    deleteHandle(id) {
      this.$confirm(`确定确定要进行删除操作吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/exam-admin/ques/judge/delete'),
          method: 'post',
          data: {
            ids: id || this.dataListSelections.map(item => item.id).join(',')
          }
        }).then(data => {
          if (data && data.code === 200) {
            this.$notify.success({
              title: '提示',
              message: '操作成功'
            })
            this.pageIndex > 1 && this.dataList.length <= 1 && this.pageIndex --
            this.getDataList()
          } else {
            this.$notify.error({
              title: '提示',
              message: data.msg
            })
          }
        })
      })
    },
    formatterLevel(row, column) {
      switch (row.level) {
        case 0:
          return '简单'
        case 1:
          return '正常'
        case 2:
          return '困难'
      }
    },
    batchImportHandlea() {
      this.batchImportVisible = true
      this.$nextTick(() => {
        this.$refs.batchImport.init(2)
      })
    },
    uploadFile(data) {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.7)'
      })
      this.$http({
        url: this.$http.adornUrl('/exam-admin/ques/import/save'),
        method: 'post',
        data: data
      }).then(res => {
        if (parseInt(res.code) === 200) {
          this.$notify.success('导入成功')
          this.getDataList()
          this.$refs.paperCate.init()
          this.batchImportVisible = false
        } else {
          this.$notify.error(res.msg)
          this.$refs.batchImport.resetFile()
        }
        this.loading.close()
      })
    }
  },
  destroyed() {
    window.removeEventListener('resize', this.examResize())
  }
}
</script>
<style lang="scss" scoped>
.questions-box {
  height: 100%;
  display: flex;
  overflow: auto;

  .questions-left {
    padding-right: 10px;
    border-right: 1px solid #9e9e9e;
  }

  .questions-right {
    flex: 1;
    padding-left: 10px;
    overflow: auto;
  }
}
</style>
